<!-- 车辆编辑 - 综合表单页面 -->
<template>
    <div class="page-container">
        <el-form ref="form" :model="form" :label-width="$globalCss.formLabelWidth_default" :rules="formRules"
            v-loading="loading" label-position="right">

            <ex_header_spiler :title="$tt('label_base_info')"></ex_header_spiler>

            <div class="flex_row_wrap">
                <el-form-item :label="$tt('label_tms_vehicle_license_number')" prop="vehicleNo" class="form_item_default">
                    <ex_super_input v-model="form.vehicleNo" class="form_input_default" maxlength="20" show-word-limit />
                </el-form-item>
                <el-form-item :label="$tt('label_tms_vehicle_vehicle_model')" prop="vehicleTypeId" class="form_item_default">
                    <ex_super_input v-model="form.vehicleTypeId" class="form_input_default" type="select"
                        url="/tms-api/base/TmsVehicleTypeInfoRpc/selectLabel.json" storeData
                        :option="{ label: 'label', value: 'id' }" @changeItem="e => {
                            if (!e) e = { vehicleProperty: null, label: null, }
                            form.vehicleType = e.label
                            setVehicleProperty(e.vehicleProperty)
                        }" />
                </el-form-item>
            </div>
            <div class="flex_row_wrap">
                <el-form-item :label="$tt('label_tms_vehicle_brand_model')" prop="brandType" class="form_item_default">
                    <ex_super_input v-model="form.brandType" class="form_input_default" maxlength="20" show-word-limit />
                </el-form-item>
                <el-form-item :label="$tt('label_tms_vehicle_vehicle_attribute')" prop="vehicleProperty" class="form_item_default">
                    <ex_super_input v-model="form.vehicleProperty" class="form_input_default" type="select"
                        :items="vehiclePropertyItems" :attrs="{ multiple: true }" />
                </el-form-item>
            </div>
            <div class="flex_row_wrap">
                <el-form-item :label="$tt('label_tms_vehicle_vehicle_age')" prop="vehicleExperience" class="form_item_default">
                    <ex_super_input v-model="form.vehicleExperience" class="form_input_default" type="input-number"
                        :min="0" />
                </el-form-item>
                <el-form-item :label="$tt('label_tms_driver_affiliated_supplier')" prop="supplierId" class="form_item_default">
                    <ex_super_input :value="form.supplierId" class="form_input_default" type="select"
                        url="/srm-api/supplier/SupplierRpc/getSupplierDict.json" storeData
                        :listHandler=" e => e.map(it => {
                              it.disabled = it.status === 'DISABLED'
                              return it
                            })"
                        :option="{ label: 'supplierName', value: 'supplierId' }" @changeItem="e => {
                            if (!e) e = { supplierName: null, supplierId: null, supplierCode: null }
                            form.supplierName = e.supplierName
                            form.supplierId = e.supplierId
                        }" />
                </el-form-item>
            </div>

            <div class="flex_row_wrap">
                <el-form-item :label="$tt('label_tms_vehicle_license_validity')" prop="travelExpirationDate" class="form_item_default">
                    <ex_super_input v-model="form.travelExpirationDate" class="form_input_default" type="date-picker" />
                </el-form-item>
                <el-form-item :label="$tt('label_tms_vehicle_compulsory_validity')" prop="insureExpirationDate" class="form_item_default">
                    <ex_super_input v-model="form.insureExpirationDate" class="form_input_default" type="date-picker" />
                </el-form-item>
            </div>

            <div class="flex_row_wrap">
                <el-form-item :label="$tt('label_tms_vehicle_driving_permit')" prop="travelImage" class="form_item_default">
                    <ex_super_input v-model="form.travelImage" class="form_input_default" type="upload-img" />
                </el-form-item>
                <el-form-item :label="$tt('label_tms_vehicle_insurance_photo')" prop="insureImage" class="form_item_default">
                    <ex_super_input v-model="form.insureImage" class="form_input_default" type="upload-img" />
                </el-form-item>
            </div>

            <div class="flex_row_wrap">
                <el-form-item :label="$tt('label_tms_vehicle_body_photo')" prop="vehicleImage" class="form_item_default">
                    <ex_super_input v-model="form.vehicleImage" class="form_input_default" type="upload-img" />
                </el-form-item>
            </div>
            <el-form-item label-width="0">
                <span>
                    <el-button type="primary" @click="submit">{{ $tt('label_save') }}</el-button>
                    <el-button @click="$tag.tagClose()">{{ $tt('label_fms_account_config_cancel') }}</el-button>
                </span>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>

import router_params from '@/mixin/router_params';

let defaultObj = {
    // companyId: null,//	long 	公司id
    // bindDriverId: null,//	long 	绑定司机id
    vehicleNo: null,//string 	车牌号
    vehicleTypeId: null,//	long 	车型id
    vehicleType: null,//	string 	车型
    brandType: null,//string 	品牌类型
    vehicleProperty: [],//	string 	车辆属性
    travelExpirationDate: null,//	long 	行驶证有效期
    // status: null,//	IsAvailableStatusEnum 	ENABLE:启用, DISABLED:停用
    vehicleExperience: null,//	integer 	车龄
    insureExpirationDate: null,//	long 	保险有效期
    supplierId: null,//long 	所属供应商id
    supplierName: null,//	string 	所属供应商名称
    vehicleImage: null,//	string 	车身照
    travelImage: null,//	string 	行驶证照
    insureImage: null,//	string 	保险照
}
export default {
    name: 'vehicle_operate',
    mixins: [router_params],
    components: {},

    data() {
        return {
            edit: false,
            loading: false,
            form: _.cloneDeep(defaultObj),
            vehiclePropertyItems: [],
            formRules: {
                vehicleNo: { required: true, message: '不能为空', trigger: 'change' },
                vehicleTypeId: { required: true, message: '不能为空', trigger: 'change' },
                vehicleProperty: { required: true, message: '不能为空', trigger: 'change' },
                travelExpirationDate: { required: true, message: '不能为空', trigger: 'change' },
                vehicleExperience: { required: true, message: '不能为空', trigger: 'change' },
                insureExpirationDate: { required: true, message: '不能为空', trigger: 'change' },
                supplierId: { required: true, message: '不能为空', trigger: 'change' },
                travelImage: { required: true, message: '不能为空', trigger: 'change' },
                insureImage: { required: true, message: '不能为空', trigger: 'change' },
            },
        };
    },

    mounted() {

    },

    methods: {
        setVehicleProperty(list) {
            let enumList = []
            if (list) {
                enumList = _.split(list, ',')
            } else {
                enumList = this.$enumOptions['VehiclePropertyEnum']
            }
            if (this.form.vehicleProperty.some(it => !enumList.includes(it))) {
                this.form.vehicleProperty = []
            }
            this.vehiclePropertyItems = enumList.map(it => {
                return { _label: this.$enumShow(it, 'VehiclePropertyEnum'), _value: it }
            })

        },

        getType() {
            this.loading = true
            this.$ajax({
                url: "/tms-api/base/TmsVehicleTypeInfoRpc/detail.json",
                method: 'post',
                data: { id: this.form.vehicleTypeId },
                success: (res) => {
                    this.loading = false
                    if (res.data) {
                        this.setVehicleProperty(res.data.vehicleProperty)
                    }
                }
            })

        },
        init_data_default(into_params) {
            this.edit = !!into_params.edit
            if (this.edit) {
                if (into_params.id) {
                    this.loading = true
                    this.$ajax({
                        url: "/tms-api/base/TmsVehicleInfoRpc/detail.json",
                        method: 'post',
                        data: { id: into_params.id },
                        success: (res) => {
                            this.loading = false

                            if (!res.data.vehicleProperty instanceof Array) {
                                res.data.vehicleProperty = []
                            }
                            this.form = Object.assign({}, _.cloneDeep(defaultObj), res.data)

                            this.fixTabLabel()
                            this.getType()
                        }
                    })
                }
            } else {
                this.setVehicleProperty()
            }
            this.fixTabLabel()
        },
        fixTabLabel() {
            if (this.edit) {
                this.$emit("tagModifyLabel", { _key: 'label_name_code', name: "编辑车辆", code: this.form.vehicleNo || "" })


            } else {
                this.$emit('tagModifyLabel', "新增车辆")
            }
        },
        submit() {
            this.$refs['form'].validate((valid, obj) => {

                if (valid) {
                    this.$ajax({
                        url: "/tms-api/base/TmsVehicleInfoRpc/saveUpdate.json",
                        method: 'post', type: 'json',
                        data: this.form,
                        success: (res) => {
                            this.$message.success(this.$tt('tip_submit_success'))

                            this.return_emit(null, "reload")
                            this.$tag.tagClose(null, this.intoPath)

                        }
                    })
                } else {
                    this.$message.error(this.$tt('form_validate_error'))
                    return false;
                }
            });

        },
    }
};

</script>
<style></style>
